<meta charset="UTF-8">
<div id="onlineuser">
    <div class="full">
        <h3 class="h3-title">{{$t("bgMgr.onlineUsers")}}</h3>
        <ul>
            <li style="width: 200px;">
                <i-input v-model.trim="queryParameter" icon="ios-close-circle-outline" @on-click="cleanSearchVal"></i-input>
            </li>
            <li>
                <i-button type="primary" @click="handlerClickQuery">{{$t("reportForm.query")}}</i-button>
            </li>
        </ul>
        <div class="table-wraper">
            <i-table border :columns="columns" :height="taleHeight" :data="tableData" :loading="loading"></i-table>
        </div>
        <div class="my-page" style="margin: 5px 0;">
            <Page :total="total" :page-size="10" :current="currentIndex" @on-change="changePage"></Page>
        </div>

    </div>
    <script>
        vueInstanse = new Vue({
            el: "#onlineuser",
            i18n: utils.getI18n(),
            data: {
                queryTableData: [],
                queryParameter: "",
                loading: true,
                total: 0,
                currentIndex: 1,
                columns: [{
                    title: vRoot.$t("user.username"),
                    key: 'username',
                }, {
                    title: vRoot.$t("user.userType"),
                    width: 120,
                    key: 'userTypeStr'
                }, {
                    title: vRoot.$t("header.loginSource"),
                    width: 120,
                    key: 'from'
                }, {
                    title: vRoot.$t("header.loginTime"),
                    key: 'logintimeStr'
                }, {
                    title: 'IP',
                    key: 'loginip'
                }, {
                    title: vRoot.$t("header.multiSiteLanding"),
                    width: 120,
                    key: 'multiloginStr'
                }, ],
                tableData: [],
                recordsList: [],
                taleHeight: 300,

            },
            methods: {
                cleanSearchVal: function() {
                    this.queryParameter = '';
                },
                changePage: function(index) {
                    var offset = index * 10;
                    var start = (index - 1) * 10;
                    var me = this;
                    this.currentIndex = index;
                    this.tableData = this.recordsList.slice(start, offset);
                },
                handlerClickQuery: function() {
                    var self = this;
                    var recordsList = [];
                    var queryParameterLowerCase = this.queryParameter.toLowerCase();
                    if (self.queryParameter == '') {
                        this.queryOnlineUsers();
                    } else {
                        this.recordsList.forEach(function(record) {
                            var username = record.username;
                            if (
                                record.username.indexOf(self.queryParameter) != -1
                            ) {
                                recordsList.push(record);
                            }
                        })

                        this.currentIndex = 1;
                        this.recordsList = recordsList;
                        this.tableData = this.recordsList.slice(0, 10);
                        this.total = this.recordsList.length;
                    }

                },

                getUserTypeStr: function(type) {
                    var name = "";
                    for (var i = 0; i < this.userTypeDescrList.length; i++) {
                        var item = this.userTypeDescrList[i];
                        if (item.type == type) {
                            name = item.name;
                            break;
                        }
                    };
                    return name;
                },


                calcTableHeight: function() {
                    var wHeight = window.innerHeight;
                    if (wHeight < 760) {
                        wHeight = 760;
                    }
                    this.taleHeight = wHeight - 185;
                },
                queryOnlineUsers: function() {
                    var me = this;
                    var url = myUrls.onlineUsers();
                    utils.sendAjax(url, {}, function(resp) {
                        me.loading = false;
                        if (resp.status == 0) {
                            var users = resp.users;
                            if (users) {
                                users.sort(function(a, b) {
                                    return b.logintime - a.logintime
                                });
                                users.forEach(function(item) {
                                    item.userTypeStr = me.getUserTypeStr(item.usertype);
                                    item.multiloginStr = item.multilogin == 1 ? vRoot.$t('header.yes') : vRoot.$t('header.no');
                                    item.logintimeStr = DateFormat.longToLocalDateTimeStr(item.logintime);
                                });
                                me.tableData = users.slice(0, 10);
                                me.recordsList = users;
                                me.total = users.length;
                                me.currentIndex = 1;
                            }
                        }
                    });
                }
            },
            mounted: function() {
                var me = this;
                this.userTypeDescrList = vstore.state.userTypeDescrList;
                this.queryOnlineUsers();
                this.calcTableHeight();
                window.onresize = function() {
                    me.calcTableHeight();
                }
            }
        })
    </script>
</div>